<template>
  <div class="custom_video_player">
    <Navbar :item="{ transparent: true }"></Navbar>
    <div class="custom_video_player_content">
      <div
        class="custom_video_content_item"
        v-for="(item, index) in contentList"
        :key="'list_index_' + index"
      >
        <Groups :item="item" :index="index" v-if="item"></Groups>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "videoPlayer",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    Groups: () =>
      import(/* webpackChunkName:'groups' */ "../../components/groups/groups"),
    Navbar: () =>
      import(
        /* webpackChunkName:'navbarPublic' */ "../../components/navbar/navbarPublic"
      ),
  },
  data() {
    return {
      contentList: [],
    };
  },
  mounted() {
    this.$on("goBackClickHandle", this.goBackClickHandle);
    this.getPageItemsData();
  },
  methods: {
    getPageItemsData() {
      const that = this;
      that.$store
        .dispatch("getStatePageVideoPlayerItemsData", that.$route.name)
        .then((v) => {
          console.log(v);
          that.contentList = v;
        });
    },
    goBackClickHandle() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_video_player {
  padding: 0 0 (60 / @base) 0;
  background-color: #000;
  .custom_video_player_content {
    margin: (46 / @base) 0 0;
  }
}
</style>
